<template>
    <div class="biggest-box">
        <div class="make-menu-page" v-if="flag">
            <!--        logo-->
            <div class="login-heading">
                <div class="logo">
                    <span class="logo-span"><a href="/">芬 享</a></span>
                    <span class="login-text">众享你的喜悦!</span>
                </div>
            </div>
            <el-row>
                <el-col :span="16">

                    <div class="make-menu-body">

                        <!--                    菜谱名称-->
                        <div class="menu-info">
                            <div class="text"><span class="need">*</span>菜谱名称</div>
                            <el-input size="mini"
                                      show-word-limit
                                      v-model="form.name"
                                      minlength="1"
                                      maxlength="30"
                                      placeholder="请输入菜谱名称"></el-input>
                        </div>


                        <!--成品图-->
                        <div class="menu-info">
                            <div class="text"><span class="need">*</span>成品图片(最多9张)</div>

                            <div class="upload">
                            <span class="upload-list-btn">
                                <form action class="upload-form" method="post"
                                      enctype="multipart/form-data" ref="uploadFormMulti">
                                    <input type="file"
                                           multiple
                                           @change="uploadImg"
                                           accept="image/jpg, image/jpeg, image/png, image/gif"
                                           class="upload-img-input"/>
                                    <span>上传成品图</span>
                                </form>
                            </span>
                                <span>本次共选择{{imgList.length}}张图片</span>
                            </div>

                            <div class="upload-img-list">
                                <div class="menu-img" v-for="(item,index) in imgList" :key="index">
                                    <img :src="item.src" alt="">
                                    <i @click="detele(index)" class="el-icon-close delete"></i>
                                </div>
                            </div>

                        </div>

                        <!--                    描述-->
                        <div class="menu-info">
                            <el-input
                                    type="textarea"
                                    :rows="4"
                                    maxlength="500"
                                    minlength="0"
                                    resize="none"
                                    show-word-limit
                                    placeholder="请输入菜谱描述,最多500字"
                                    v-model="form.desc">
                            </el-input>
                        </div>

                        <!--                    制作难度-->
                        <div class="menu-info">
                            <div class="text"><span class="need">*</span>制作难度</div>
                            <div class="tag-list">
                                <el-tag class="tag" :class="{
                                active:form.level != null && form.level === item.dictCode
                            }" @click="selectLevel(item)" size="small"
                                        v-for="(item,index) in menuLevel" :key="index" type="info">
                                    {{item.dictLabel}}
                                </el-tag>
                            </div>
                        </div>

                        <!--                    所需时间-->
                        <div class="menu-info">
                            <div class="text"><span class="need">*</span>需要时间</div>
                            <div class="tag-list">
                                <el-tag class="tag"
                                        :class="{active:form.time != null && form.time === item.dictCode}"
                                        @click="selectTime(item)" v-for="(item,index) in menuTime" :key="index"
                                        size="small" type="info">
                                    {{item.dictLabel}}
                                </el-tag>
                            </div>
                        </div>


                        <!--                    口味等...-->
                        <div class="menu-info">
                            <div class="text"><span class="need">*</span>口味，工艺与使用厨具</div>

                            <el-select
                                    size="mini"
                                    v-model="form.taste" placeholder="口味">
                                <el-option :label="item.dictLabel" :value="item.dictCode"
                                           v-for="(item,index) in foodTaste"
                                           :key="index"/>
                            </el-select>

                            <el-select
                                    style="margin: 0 30px"
                                    size="mini"
                                    v-model="form.mode" placeholder="烹饪工艺">
                                <el-option :label="item.dictLabel" :value="item.dictCode"
                                           v-for="(item,index) in menuMode"
                                           :key="index"/>
                            </el-select>

                            <el-select v-model="form.tools" size="mini" :multiple-limit="5" multiple
                                       placeholder="使用厨具(最多5个)">
                                <el-option :label="item.dictLabel" :value="item.dictCode"
                                           v-for="(item,index) in menuTool"
                                           :key="index"/>
                            </el-select>


                        </div>


                        <!--                    食材明细-->
                        <div class="menu-info">
                            <div class="text"><span class="need">*</span>食材明细</div>
                            <div>
                                <!--            主料-->
                                <MyInput :name="'主料'" :init="form.mainMaterials" @changeMaterials="getMainMaterials"/>
                            </div>


                            <div>
                                <!--            调料-->
                                <MyInput :name="'辅料'" :init="form.otherMaterials" @changeMaterials="getOtherMaterials"/>
                            </div>


                            <div>
                                <!--            辅料-->
                                <MyInput :name="'调料'" :init="form.assistMaterials"
                                         @changeMaterials="getAssistMaterials"/>
                            </div>
                        </div>


                        <!--                    做法步骤-->
                        <div class="menu-info">
                            <div class="text"><span class="need">*</span>做法步骤 (步骤图片非必填)</div>
                            <StepList :steps="form.steps"/>
                        </div>

                        <!--                    描述-->
                        <div class="menu-info">
                            <div class="text">小窍门</div>
                            <el-input
                                    type="textarea"
                                    :rows="4"
                                    maxlength="500"
                                    minlength="0"
                                    resize="none"
                                    show-word-limit
                                    placeholder="最多输入500字"
                                    v-model="form.trick">
                            </el-input>
                        </div>

                    </div>


                </el-col>
                <el-col :span="8">
                    <div style="position: fixed">
                        <div class="menu-info">
                            <div class="text"><span class="need">*</span>数据域</div>
                            <el-radio-group v-model="form.scope" @change="changeDataScope">
                                <el-radio :label="item.dictValue" :key="index"
                                          v-for="(item,index) in dataScopeOption">
                                    {{item.dictLabel}}
                                </el-radio>
                            </el-radio-group>
                        </div>


                        <div class="btns" style="margin-top: 50px">
                            <el-button type="danger" @click="submit" :loading="loading">
                                <span v-if="!loading">发布菜谱</span>
                                <span v-else>发布菜谱中...</span>
                            </el-button>
                            <el-button type="info" @click="draft">存为草稿</el-button>
                        </div>

                        <p class="tip" style="font-size: 13px;color: #67C23A;margin-top: 20px">
                            已于 0:16 自动保存
                        </p>
                    </div>

                </el-col>
            </el-row>
        </div>
        <div class="success" v-else>

        </div>
    </div>
</template>

<script>
    import MyInput from "./components/MyInput"
    import StepList from "./components/StepList";

    import {uploadImg} from "@/api/business/file"
    import {getDictData} from "@/api/common/common";
    import {createMenu, getMenuById} from "@/api/business/menu"

    export default {
        name: 'MakeMenu',
        data() {
            return {
                menuId: -1,
                loading: false,
                flag: true,
                form: {
                    name: "",
                    desc: "",
                    level: null,
                    time: null,
                    taste: null,
                    mode: null,
                    tools: [],
                    trick: "",
                    mainMaterials: [],
                    otherMaterials: [],
                    assistMaterials: [],
                    scope: "3",
                    dataScope: 3,
                    status: 0,
                    steps: [
                        {
                            index: 0,
                            desc: "",
                            picture: {}
                        }
                    ],
                    covers: []
                },
                imgList: [],//成品图
                menuLevel: [],//数据字典：菜谱难度
                menuTime: [],//数据字典：菜谱制作时间
                menuMode: [],//数据字典：烹饪工艺
                menuTool: [],//数据字典：烹饪工具
                foodTaste: [],//数据字典：食物口味
                dataScopeOption: [],//数据字典：数据域

            };
        },
        methods: {
            filterMaterials(materials) {
                let length = materials.length
                let arr = []
                for (let i = 0; i < length; i++) {
                    if (materials[i].name !== "") {
                        arr.push(materials[i])
                    }
                }
                materials.splice(0, length)
                materials.push(...arr)

            },
            getMainMaterials(materials) {
                this.form.mainMaterials.splice(0, this.form.mainMaterials.length)
                this.form.mainMaterials.push(...materials)
            },
            getOtherMaterials(materials) {
                this.form.otherMaterials.splice(0, this.form.otherMaterials.length)
                this.form.otherMaterials.push(...materials)
            },
            getAssistMaterials(materials) {
                this.form.assistMaterials.splice(0, this.form.assistMaterials.length)
                this.form.assistMaterials.push(...materials)
            },
            //选择制作难度
            selectLevel(item) {
                this.form.level = item.dictCode
            },
            //选择时间
            selectTime(item) {
                this.form.time = item.dictCode
            },
            //改变数据域
            changeDataScope(data) {
                this.form.dataScope = parseInt(data)
            },
            //提交信息
            submit() {
                if (this.check()) {
                    this.form.covers = this.imgList
                    this.filterMaterials(this.form.mainMaterials)
                    this.filterMaterials(this.form.otherMaterials)
                    this.filterMaterials(this.form.assistMaterials)
                    // 发布状态
                    this.form.status = this.$Constants.SHOW_STATUS
                    this.loading = true
                    createMenu(this.form).then(res => {
                        this.msgSuccess("发布成功")
                        this.loading = false
                        this.flag = false
                        // 发布成功直接跳转到预览页面
                        this.$router.push({
                            path: `/menu/${res.data.menuId}`
                        })
                    })
                }
            },
            // 不需要检查数据
            draft() {
                if (this.check()) {
                    this.form.covers = this.imgList
                    this.filterMaterials(this.form.mainMaterials)
                    this.filterMaterials(this.form.otherMaterials)
                    this.filterMaterials(this.form.assistMaterials)
                    // 设置为草稿状态
                    this.form.status = this.$Constants.DRAFT_STATUS
                    createMenu(this.form).then(res => {
                        this.menuId = res.data.menuId
                        this.msgSuccess("保存成功")
                    })
                }
            },
            //校验
            check() {
                /**
                 * 菜谱名称
                 * 成品图
                 * 制作难度
                 * 需要时间
                 * 口味，厨具，工艺
                 * 主料，辅料，调料
                 * 制作步骤
                 * 小窍门
                 * 原创/非原创
                 */
                if (this.form.name.trim() === "") {
                    this.msgWarn("请设置菜谱名称")
                    return false
                }
                if (this.imgList.length === 0) {
                    this.msgWarn("至少上传一张成品图")
                    return false
                }
                if (this.form.level == null) {
                    this.msgWarn("请设置制作难度")
                    return false
                }
                if (this.form.time == null) {
                    this.msgWarn("请设置需要时间")
                    return false
                }
                if (this.form.taste == null) {
                    this.msgWarn("请设置口味")
                    return false
                }
                if (this.form.mode == null) {
                    this.msgWarn("请设置烹饪工艺")
                    return false
                }
                if (this.form.tools.length === 0) {
                    this.msgWarn("请设置烹饪工具")
                    return false
                }
                if (this.form.mainMaterials.length === 0
                    && this.form.otherMaterials.length === 0
                    && this.form.assistMaterials.length === 0) {
                    this.msgWarn("请设置相关食材")
                    return false
                }

                let arr = this.form.steps
                for (let i = 0; i < arr.length; i++) {
                    if (arr[i].desc.trim() == "") {
                        this.msgWarn("请填写步骤描述!")
                        return false
                    }
                }

                return true

            },
            //上传成品图
            async uploadImg() {
                if (this.imgList.length > 9) {
                    this.msgWarn("最多上传9张成品图")
                    return
                }
                let _this = this
                //构造formData对象
                let form = this.$refs.uploadFormMulti
                let file = form[0].files[0]
                let formData = new FormData()
                formData.append("file", file)
                uploadImg(formData).then(res => {
                    _this.imgList.push(res.data)
                })
            },
            //删除成品图片
            detele(index) {
                this.imgList.splice(index, 1)
            },
            //初始化，获取数据
            init() {
                /**
                 * 发起这么多请求，可以优化一下
                 */
                getDictData({
                    dictType: "menu_level"
                }).then(res => {
                    this.menuLevel = res.data
                })

                getDictData({
                    dictType: "menu_time"
                }).then(res => {
                    this.menuTime = res.data
                })

                getDictData({
                    dictType: "menu_tool"
                }).then(res => {
                    this.menuTool = res.data
                })

                getDictData({
                    dictType: "menu_mode"
                }).then(res => {
                    this.menuMode = res.data
                })

                getDictData({
                    dictType: "food_taste"
                }).then(res => {
                    this.foodTaste = res.data
                })

                getDictData({
                    dictType: "data_scope"
                }).then(res => {
                    this.dataScopeOption = res.data
                })
            }
        },
        mounted() {
            this.init()
            this.menuId = this.$route.query.menuId
            if (this.menuId) {
                // TODO 如果存在，则说明是修改操作,则需要查询菜单信息
                getMenuById(this.menuId).then(res => {
                    let menu = res.data
                    this.form.menuId = menu.menuId
                    this.form.name = menu.name
                    this.form.desc = menu.desc
                    this.form.level = menu.level
                    this.form.time = menu.time
                    this.form.taste = menu.taste
                    this.form.mode = menu.mode
                    this.form.tools.push(...menu.tools)
                    this.form.trick = menu.trick
                    this.form.mainMaterials.push(...menu.mainMaterials)
                    this.form.otherMaterials.push(...menu.otherMaterials)
                    this.form.assistMaterials.push(...menu.assistMaterials)
                    this.form.scope = menu.dataScope + ""
                    this.form.dataScope = menu.dataScope
                    this.form.status = menu.status
                    this.form.steps.splice(0, this.form.steps.length);
                    this.form.steps.push(...menu.steps)
                    this.form.covers.push(...menu.covers)
                    this.imgList.push(...menu.covers)
                })
            }
        },
        components: {
            MyInput,
            StepList
        }
    }
</script>

<style scoped lang='less'>
    .make-menu-page {
        background-color: rgb(239, 243, 245);
        padding-bottom: 50px;

        .login-heading {
            height: 10vh;
            line-height: 10vh;
            padding: 0 5vw;
            background-color: white;
            margin-bottom: 20px;


            .logo {
                .logo-span {
                    padding: 15px 8px;
                    background-color: rgb(255, 195, 0);
                    border-radius: 15px;
                    font-size: 14px;
                    font-weight: 600;
                    cursor: pointer;
                    margin-right: 10px;
                }

                .login-text {
                    color: #E6A23C;
                }
            }
        }


        .make-menu-body {
            /*padding: 20px;*/
            padding: 0 50px;

        }

        .menu-info {
            margin-bottom: 30px;


            .tag-list {
                .active {
                    background-color: #F56C6C;
                    color: white;
                }

                .tag {
                    margin-right: 10px;
                    cursor: pointer;
                }
            }

            > .text {
                font-size: 13px;
                color: #909399;
                margin-bottom: 10px;

                .need {
                    color: red;
                    margin-right: 3px;
                }
            }

            .upload {
                display: flex;
                height: 30px;
                align-items: center;
                /*background-color: red;*/
                font-size: 13px;
                color: #909399;


                .upload-list-btn {
                    position: relative;
                    width: 80px;
                    height: 25px;
                    /*padding: 8px 10px;*/
                    margin-right: 10px;
                    border-radius: 5px;
                    cursor: pointer;
                    background-color: #DCDFE6;

                    span {
                        cursor: pointer;
                        position: absolute;
                        font-size: 12px;
                        top: 50%;
                        transform: translate(15%, -50%);
                    }

                    .upload-img-input {
                        cursor: pointer;
                        position: absolute;
                        z-index: 2;
                        width: 100%;
                        height: 100%;
                        opacity: 0;
                    }
                }
            }


            .upload-img-list {
                margin-top: 10px;
                display: flex;
                flex-wrap: wrap;

                > .menu-img:hover {
                    > i {
                        display: block;
                    }
                }

                > .menu-img {
                    width: 150px;
                    height: 150px;
                    line-height: 150px;
                    margin-right: 20px;
                    text-align: center;
                    position: relative;

                    > img {
                        display: inline-block;
                        max-height: 100%;
                        max-width: 100%;
                        min-height: 100px;
                        min-width: 100px;
                        vertical-align: middle;
                        cursor: pointer;
                    }

                    > i {
                        display: none;
                        position: absolute;
                        left: 50%;
                        top: 50%;
                        transform: translate(-50%, -50%);
                        font-size: 35px;
                        font-weight: 700;
                        color: #F56C6C;
                        cursor: pointer;
                    }
                }

            }

        }

    }
</style>